<template>
  <div class="floor-container" @click="readerDetail">

    <div class="title">{{floor.title}}</div>

    <div class="gallery">
      <div class="img-wrapper">
        <div class="img-box" :style="{'background-image': 'url('+floor.backImg+')'}"></div>
      </div>
      <span class="reminder">试读</span>
    </div>

    <p class="brief indent">{{floor.summary}}</p>

    <div class="separator"></div>

    <div class="status">

      <div class="date">{{floor.showDay}}</div>

      <div class="visited">
        <!-- visited svg start -->
        <svg class="icon" t="1535791890695" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9672" width="200" height="200">
          <path :fill="colors.normal" d="M512 288c40 0 79.6 5.5 117.6 16.3 36.8 10.5 72.1 25.9 104.9 45.8 64.9 39.4 118.2 95.4 154.1 161.9-35.9 66.5-89.2 122.5-154.1 161.9-32.8 19.9-68.1 35.3-104.9 45.8C591.6 730.5 552 736 512 736s-79.6-5.5-117.6-16.3c-36.8-10.5-72.1-25.9-104.9-45.8-64.9-39.4-118.2-95.4-154.1-161.9 35.9-66.5 89.2-122.5 154.1-161.9 32.8-19.9 68.1-35.3 104.9-45.8C432.4 293.5 472 288 512 288m0-64c-187.4 0-350.3 104.4-433 257.8-10.2 18.8-10.2 41.6 0 60.4C161.7 695.6 324.6 800 512 800s350.3-104.4 433-257.8c10.2-18.8 10.2-41.6 0-60.4C862.3 328.4 699.4 224 512 224z"
                p-id="9673"></path>
          <path :fill="colors.normal" d="M512 384c34.2 0 66.3 13.3 90.5 37.5 24.2 24.2 37.5 56.3 37.5 90.5s-13.3 66.3-37.5 90.5C578.3 626.7 546.2 640 512 640s-66.3-13.3-90.5-37.5C397.3 578.3 384 546.2 384 512s13.3-66.3 37.5-90.5c24.2-24.2 56.3-37.5 90.5-37.5m0-64c-106 0-192 86-192 192s86 192 192 192 192-86 192-192-86-192-192-192z"
                p-id="9674"></path>
        </svg>
        <!--visited svg end-->
        {{floor.virtualNum}}11
      </div>

      <div class="like">
        <!-- like svg start -->
        <svg class="icon" t="1535791612101" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4222" width="200" height="200">
          <path :fill="colors.normal" d="M742 424.096c0 0-36.096 0.432-131.408 0.432 46-103.68-16.032-224.352-72.32-224.352-28.784 0-67.136 25.664-67.136 56.816 0 60.576 5.04 86.864-6.048 115.264-11.072 28.384-26.24 83.712-110.24 83.712-58.608 0-110.8 0-110.8 0-30.768 0-46.4 30.512-44.336 54.048 2.08 23.536 22.752 234.24 24.816 264.016 2.08 29.776 19.648 49.664 49.648 49.664 0 0 34.752 0.352 46.864 0 15.264-0.48-1.904-16.752 37.568-16.752s31.296 16.752 44.832 16.752c94.096 0 258.848 0 258.848 0 46.608 0 79.52-29.552 96.336-82.16 16.672-52.112 45.6-171.808 54.592-225.136C821.536 467.344 794.384 424.096 742 424.096zM309.728 791.904l-6.576 0c-33.648 0-43.216-0.64-43.216-0.64l-29.904-303.616L344 487.648l0 289.136C323.248 778.768 318.544 784.608 309.728 791.904zM780.224 510.768c-7.664 50.784-38 170.448-54.832 218.992-10.992 31.76-26.416 62-53.44 62L413.824 791.76c-9.584-7.52-14.752-13.536-37.968-15.232L375.856 486.592c82.96-7.712 102.512-60.144 113.2-89.168 0 0 14.768-50.512 14.768-128.448 0-33.968 26.384-38.08 31.296-37.184 45.024 0 75.024 120.224 50.832 175.184l-25.744 49.184 181.76 0C769.136 456.176 782.912 492.992 780.224 510.768z"
                p-id="4223"></path>
        </svg>
        <!--like svg end-->
        <!-- {{likes}} -->
        22
      </div>

    </div>

  </div>
</template>

<script>
  export default {
    name: 'floor',
    props: ['floor'],
    data() {
      return {
        colors: {
          normal: '#707070',
          like: '#29abae'
        }
      }
    },
    methods: {
      readerDetail () {
        this.$router.push({path:'microAudio', query: {id: this.floor.id}})
      }
    }
  }
</script>

<style lang="stylus" scoped>

  flex_center()
    display flex
    justify-content center
    align-items center

  *
    box-sizing border-box

  .indent
    text-indent 1.3em

  .floor-container
    margin-bottom 0.15rem
    width 7.50rem
    overflow auto
    padding 0.3rem
    padding-bottom 0
    width 100%
    background-color #fff
    .title
      color #0a0a0a
      font-size 0.36rem
      font-weight bold
      margin-bottom 0.3rem
    .gallery
      position relative
      margin-bottom 0.2rem
      width: 100%
      .img-wrapper
        border-radius 6px
        overflow hidden
        .img-box
          width 100%
          height 2.87rem
          background-repeat no-repeat
          background-position center top
      .reminder
        font-size 0.24rem
        letter-spacing 0
        padding 0.33em 0.875em
        position absolute
        left 0
        top 0
        background-color #f39700
        border-radius 6px
        color #fff
    .brief
      margin-bottom 0.2rem
      color #282828
      font-size 0.28rem
      line-height 0.42rem
      letter-spacing 0
      font-weight 400
    .separator
      min-height 1px
      border-top 1px #cccccc solid
    .status
      color #707070
      font-size 0.24rem
      flex-direction row
      justify-content space-between
      align-items center
      height 0.7rem
      .date
        width: 33%
        float left
        height 0.7rem
        line-height 0.7rem
        text-align center
      .visited
        width: 33%
        float left
        height 0.7rem
        line-height 0.7rem
        text-align center
        .icon
          margin-right 0.1rem
          height 0.25rem
          width auto
          vertical-align middle
      .like
        width: 33%
        float left
        height 0.7rem
        line-height 0.7rem
        text-align center
        .icon
          margin-right 0.05rem
          height 0.35rem
          width auto
          vertical-align middle
</style>